<template>
	<u-popup :show="localVisible" mode="center" round="10" :customStyle="{ width: '80%', padding: '20rpx' }"
		@close="handleClose" closeable=true>
		<view class="popup-content">
			<!-- <view class="popup-title">申请时间 ：</view> -->
			<!-- 特采详情 -->
			<view v-if="materialData.isSpecial">
				<view class="popup-title">特采详情</view>
				<view class="remark">{{ materialData.specialRemark || '暂无备注信息' }}</view>
				<!-- 处理按钮 -->
				<u-button v-if="materialData.type ==='modify'" type="success" @click="handleSpecialChange"
					style="margin-top: 30rpx;">提交</u-button>

				<!-- 审核 -->
				<u-button v-if="materialData.type ==='handle'" type="success" @click="auditHandle"
					style="margin-top: 30rpx;">审核通过</u-button>
			</view>

			<!-- 退货详情 -->
			<view v-if="materialData.isRet">
				<view class="popup-title">退货详情</view>
				<view class="remark">{{ materialData.retRemark || '暂无备注信息' }}</view>
				<!-- 处理按钮 -->
				<u-button v-if="materialData.type ==='modify'" type="success" @click="handleRetChange"
					style="margin-top: 30rpx;">提交</u-button>

				<u-button v-if="materialData.type === 'handle'" type="success" @click="handleRet('success')"
					style="margin-top: 30rpx;">审核通过</u-button>
			<!-- 	<u-button v-if="materialData.type === 'handle'" type="error" @click="handleRet('error')"
					style="margin-top: 30rpx;">拒绝</u-button>	 -->
			</view>

			<!-- 数量变更详情 -->
			<view v-if="(materialData.correctionProductList != null && materialData.correctionProductList.length > 0)
				|| (materialData.correctionPartsList != null && materialData.correctionPartsList.length > 0)">
				<view class="popup-title">成品变更</view>
				<view class="change-list">
					<view v-for="(change, idx) in materialData.correctionProductList" :key="idx" class="change-item">
						<text class="change-name">{{ change.name }}：</text>
						<text class="change-quantity">
							{{ change.oldNum }} →
							<text class="new-quantity">{{ change.newNum }}</text>
						</text>
					</view>
				</view>

				<view class="popup-title">配件变更</view>
				<view class="change-list">
					<view v-for="(change, idx) in materialData.correctionPartsList" :key="idx" class="change-item">
						<text class="change-name">{{change.productName}} - {{ change.name }}：</text>
						<text class="change-quantity">
							{{ change.oldNum }} →
							<text class="new-quantity">{{ change.newNum }}</text>
						</text>
					</view>
				</view>


				<!-- 处理按钮 -->
				<u-button v-if="materialData.type ==='modify'" type="success" @click="handleQuantityChange"
					style="margin-top: 30rpx;">处理变更</u-button>

				<!-- 处理按钮 -->
				<u-button v-if="materialData.type ==='handle'" type="success" @click="auditHandle"
					style="margin-top: 30rpx;">审核通过</u-button>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		props: {
			// 控制弹窗显示
			visible: false,
			auditRemark:'',
			// 物料数据对象
			materialData: {}
		},
		data() {
			return {
				// 本地状态管理，避免直接修改 prop
				localVisible: this.visible,

			}
		},

		watch: {
			visible: {
				immediate: true,
				handler(newVal) {
					console.log('弹窗可见状态变化:', );
					this.localVisible = newVal;
				}
			},

		},
		mounted() {
			console.log('弹窗组件已挂载', this.visible)
		},



		methods: {
			handleClose() {
				// 关闭时更新本地状态
				this.localVisible = false;
				this.$emit('update:visible', false)
				this.$emit('close')
			},
			// 处理数量变更
			handleQuantityChange() {
				// 实际业务中这里调用API接口
				uni.showLoading({
					title: '处理中...'
				});
				var that = this;
				let param = {
					productList: that.materialData.correctionProductList,
					productParts: that.materialData.correctionPartsList
				}
				this.$http.post('purchaseOrder/correctionNum', param, res => {
					if (res.success) {
						this.$uti.alert('处理成功')
						this.$emit('update-value', "correction");
						this.handleClose();
						// uni.switchTab({
						// 	url: `/pages/order/list`
						// })
					} else {
						this.$uti.alert(res.message)
					}
					//按钮状态逻辑变更
				})

			},
			handleSpecialChange() {
				// 实际业务中这里调用API接口
				uni.showLoading({
					title: '处理中...'
				});
				var that = this;
				let param = {
					orderId: that.materialData.orderId,
					type: 'special',
					remark: that.materialData.specialRemark
				}
				this.$http.get('purchaseOrder/special', param, res => {
					if (res.success) {
						this.$uti.alert('处理成功')
						this.$emit('update-value', param);
						this.handleClose();
					} else {
						this.$uti.alert(res.message)
					}
					//按钮状态逻辑变更
				})

			},
			handleRetChange() {
				// 实际业务中这里调用API接口
				uni.showLoading({
					title: '处理中...'
				});
				var that = this;
				let param = {
					orderId: that.materialData.orderId,
					type: 'ret',
					remark: that.materialData.retRemark
				}
				this.$http.get('purchaseOrder/return', param, res => {
					if (res.success) {
						this.$uti.alert('处理成功')
						this.$emit('update-value', param);
						this.handleClose();
					} else {
						this.$uti.alert(res.message)
					}
					//按钮状态逻辑变更
				})

			},
			auditHandle() {
				// 实际业务中这里调用API接口
				uni.showLoading({
					title: '处理中...'
				});
				var that = this;
				let param = {
					orderId: that.materialData.orderId,
					status: that.materialData.status,
					type: that.materialData.status,
					auditRemark:that.auditRemark
				}
				this.$http.get('purchaseOrder/audit', param, res => {
					if (res.success) {
						this.$uti.alert('处理成功')
						this.$emit('update-value', param);
						this.handleClose();
					} else {
						this.$uti.alert(res.message)
					}
					//按钮状态逻辑变更
				})
			
			},
			handleRet(status) {
				// 实际业务中这里调用API接口
				uni.showLoading({
					title: '处理中...'
				});
				var that = this;
				let param = {
					orderId: that.materialData.orderId,
					status: that.materialData.status,
					auditType: status,
					
				}
				this.$http.get('purchaseOrder/audit', param, res => {
					if (res.success) {
						this.$uti.alert('处理成功')
						this.$emit('update-value', param);
						this.handleClose();
					} else {
						this.$uti.alert(res.message)
					}
					//按钮状态逻辑变更
				})
			
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx;
	}

	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #eee;
	}

	.info {
		display: flex;
		flex-direction: column;
	}

	.popup-content {
		padding: 20rpx;
	}

	.popup-title {
		font-weight: bold;
		font-size: 36rpx;
		text-align: center;
		margin-bottom: 30rpx;
	}

	.remark {
		padding: 20rpx;
		background-color: #f9f9f9;
		border-radius: 8rpx;
	}

	.change-list {
		margin-top: 20rpx;
	}

	.change-item {
		display: flex;
		justify-content: space-between;
		padding: 15rpx 0;
		border-bottom: 1rpx dashed #eee;
	}

	.change-name {
		color: #666;
	}

	.change-quantity {
		font-weight: bold;
	}

	.new-quantity {
		color: #e64340;
	}
</style>